<!--
 * @Description: 左右分割，可拖拽
 * @Author:
 * @Date:
 * @LastEditors: dh
 * @LastEditTime: 2022-10-27 15:21:28
 -->
<template>
	<div class="page_container">
		<slot name="left">请插入左边视图slot="left"</slot>
		<div class="line" @mousedown="draggle" />
		<slot name="right">请插入右边视图slot="right"</slot>
	</div>
</template>
<script>
export default {
	props: {
		leftWidth: {
			type: Number,
			default: 400,
		},
		hidden: {
			type: String,
			default: "hidden",
		},
	},
	data() {
		return {};
	},
	mounted() {
		this.$nextTick(() => {
			let left = this.$slots.left[0].elm;
			let right = this.$slots.right[0].elm;
			left.style.overflow = this.hidden;
			right.style.overflow = "auto";
			left.style.width = this.leftWidth + "px";
			right.style.width = "calc(100% - " + left.style.width + ")";
		});
	},
	methods: {
		draggle(e) {
			let left = this.$slots.left[0].elm;
			let right = this.$slots.right[0].elm;
			let startX = e.clientX;
			let startWidth = left.clientWidth;
			document.onmousemove = function (e) {
				let offset = e.clientX - startX;
				// if (startWidth + offset > 500) {
				//   offset = 500 - startWidth;
				// } else if (startWidth + offset <= 0) {
				//   offset = -startWidth;
				// }
				left.style.width = startWidth + offset + "px";
				right.style.width = "calc(100% - " + left.style.width + ")";
			};
			document.onmouseup = function (evt) {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		},
	},
};
</script>
<style lang="scss">
.page_container {
	width: 100%;
	height: 100%;
	display: flex;
	.line {
		height: 100%;
		width: 4px;
		border-left: 1px solid rgba(0, 0, 0, 0.1);
		cursor: w-resize;
	}
}
</style>
